<template>
  <div id="appfooter"> 
         <a v-for="nav in navs" :key="nav.id" class="ic" :class="[nav.icon,nav.icon==active?'active':'']" :href="'#'+nav.path">{{nav.text}}</a>  
  </div>
</template>
<script>
export default {
 
  props: ["active"],
  data() {
    return {
      navs: []
    };
  },
  created() {
    this.getNavs();
  },
  methods: {
    getNavs() {
      this.axios
        .get(`${this.apiURL}/navs`)
        .then(ret => {
          let { data, error } = ret.data;
          this.navs = data;
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
*{
  font-style: normal;
}
#appfooter {
  border-top: 1px solid#ccc;
  background: #fff;
  font-family: "Microsoft YaHei";
  width: 750px;
  height: 100px;
  position: fixed;
  bottom: 0px;
  z-index: 10;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  .ic {
    display: block;
    width: 20%;
    text-decoration: none;
    padding-top: 60px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #3c3c3c;
    font-size: 28px;
    background-image: url("/static/nav6.2.png");
    background-repeat: no-repeat;
    background-size: 48px auto;
  }
  .home {
    background-position: center 0px;
  }
  .home.active {
    background-position: center -100px;
    color: #39ac69;
  }
  .welf {
    background-position: center -1000px;
  }
  .welf.active {
    background-position: center -1100px;
    color: #39ac69;
  }
  .shopping {
    background-position: center -200px;
  }
  .shopping.active {
    background-position: center -300px;
    color: #39ac69;
  }
  .order {
    background-position: center -400px;
  }
  .order.active {
    background-position: center -500px;
    color: #39ac69;
  }
  .my {
    background-position: center -600px;
  }
  .my.active {
    background-position: center -700px;
    color: #39ac69;
  }
}
</style>


